<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card >
        <h3>角色管理</h3>
        <el-divider></el-divider>
        <PageTools :showBefore="true">
          <template slot="before">
            <el-button size="medium" type="primary" @click="xjBTN"
              >新建</el-button
            >
            <el-button size="medium">批量操作</el-button>
            <el-button size="medium">导入</el-button>
            <el-button size="medium">导出</el-button>
          </template>
          <!-- 功能按钮 -->
          <template slot="after">
            <el-input
              placeholder="请输入内容"
              v-model="inputSearch"
              clearable
              size="medium"
            >
            </el-input>
            <el-button type="primary" size="small" @click="searchBtn"
              >搜索</el-button
            >
          </template>
        </PageTools>
        <!-- 放置表格和分页 -->
        <el-table :data="list" height="64.5vh">
          <el-table-column type="selection" width="55" />
          <!-- <el-table-column label="员工ID" sortable="" prop="username" /> -->
          <el-table-column label="员工ID" prop="YGID" />
          <el-table-column label="部门名称" prop="BMMC" />
          <el-table-column label="姓名" prop="XM" />
          <el-table-column label="所属角色" prop="SSJS" />
          <el-table-column label="启用" prop="QYvalue">
            <template slot-scope="{ row }">
              <!-- 根据当前状态来确定 是否打开开关 -->
              <el-switch :value="row.QYvalue === 1" />
            </template>
          </el-table-column>
          <el-table-column label="时间" sortable="" prop="enableState" />
          <el-table-column label="操作" fixed="right" width="280">
            <template>
              <el-button type="text" size="small">复制</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :current-page="page.page"
            :page-size="page.size"
            :total="page.total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <XJ v-if="visible" :visible.sync="visible" :Model='Model' />
    </div>
  </div>
</template>

<script>
import PageTools from "@/components/PageTools";
import XJ from "@/components/XJ";
export default {
  components: {
    PageTools,
    XJ,
  },
  data() {
    return {
      list: [
        {
          enableState: "2016-05-02",
          XM: "王小虎",
          YGID: "上海市普陀区金沙江路 1518 弄",
          QYvalue: 1,
          departmentName: "上海市普陀区金沙江路 1518 弄",
          correctionTime: "上海市普陀区金沙江路 1518 弄",
          SSJS: "上海市普陀区金沙江路 1518 弄",
        },
        {
          enableState: "2016-05-02",
          XM: "王小虎",
          YGID: "上海市普陀区金沙江路 1518 弄",
          QYvalue: 1,
          departmentName: "上海市普陀区金沙江路 1518 弄",
          correctionTime: "上海市普陀区金沙江路 1518 弄",
          SSJS: "上海市普陀区金沙江路 1518 弄",
        },
        {
          enableState: "2016-05-02",
          XM: "王小虎",
          YGID: "上海市普陀区金沙江路 1518 弄",
          QYvalue: 1,
          departmentName: "上海市普陀区金沙江路 1518 弄",
          correctionTime: "上海市普陀区金沙江路 1518 弄",
          SSJS: "上海市普陀区金沙江路 1518 弄",
        },
        {
          enableState: "2016-05-02",
          XM: "王小虎",
          YGID: "上海市普陀区金沙江路 1518 弄",
          QYvalue: 1,
          departmentName: "上海市普陀区金沙江路 1518 弄",
          correctionTime: "上海市普陀区金沙江路 1518 弄",
          SSJS: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      QYvalue: false, //table表格启用按钮
      page: {
        page: 1, //当前的 页码
        size: 5, //每条的个数
        total: 0, //总数
      },
      inputSearch: "", //input
      visible: false,
      formData: {
        YGID: "", // 员工ID
        XM: "", // 姓名
        SSJS: "", // 所属角色
        QYvalue: "", // 启用
        enableState: "", // 时间
        departmentName: "", // 部门
        correctionTime: "", // 转正时间
      },
      Model:'新增角色信息',
    };
  },
  created() {
    // 拉取信息
    // this.getEmployeeList()
  },
  methods: {
    changePage(newPage) {
      //当前页 发生改变时触发
      this.loading = true;
      console.log(newPage);
      this.page.page = newPage; //创建一个新的页码去请求数据
      this.getEmployeeList();
    },
    async getEmployeeList() {
      this.loading = true;
      try {
        const { rows, total } = await getEmployeeList(this.page);
        this.list = rows;
        this.page.total = total;
      } catch (error) {
        console.log(error);
      }
      this.loading = false;
    },
    searchBtn() {},
    // 新增
    xjBTN() {
      this.visible = true;
    },
  },
};
</script>

<style lang='scss' scoped>
.el-input--medium {
  width: 200px;
  margin-right: 10px;
}
::v-deep .el-dialog {
  margin-top: 6vh !important;
}
</style>
